<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{margin: 0;padding: 0;}
    .cont{position: relative;}
    .box{padding: 6px;float: left;}
    .sbox{border: solid 1px black;padding: 6px;}
    .sbox img{width: 200px;}
  </style>
</head>
<body>
  <div class="cont">
    <div class="box">
      <div class="sbox">
        <img src="./imgs/1.jpg" alt="">
        <p>描述：</p>
      </div>
    </div>
    <div class="box">
      <div class="sbox">
        <img src="./imgs/3.jpg" alt="">
        <p>描述：</p>
      </div>
    </div>
    <div class="box">
      <div class="sbox">
        <img src="./imgs/2.jpg" alt="">
        <p>描述：</p>
      </div>
    </div>
    <div class="box">
      <div class="sbox">
        <img src="./imgs/4.jpg" alt="">
        <p>描述：</p>
      </div>
    </div>
    <div class="box">
      <div class="sbox">
        <img src="./imgs/5.jpg" alt="">
        <p>描述：</p>
      </div>
    </div>
    <div class="box">
      <div class="sbox">
        <img src="./imgs/6.jpg" alt="">
        <p>描述：</p>
      </div>
    </div>
    <div class="box">
      <div class="sbox">
        <img src="./imgs/7.jpg" alt="">
        <p>描述：</p>
      </div>
    </div>
    <div class="box">
      <div class="sbox">
        <img src="./imgs/8.jpg" alt="">
        <p>描述：</p>
      </div>
    </div>
    <div class="box">
      <div class="sbox">
        <img src="./imgs/9.jpg" alt="">
        <p>描述：</p>
      </div>
    </div>
    <div class="box">
      <div class="sbox">
        <img src="./imgs/10.jpg" alt="">
        <p>描述：</p>
      </div>
    </div>
    <div class="box">
      <div class="sbox">
        <img src="./imgs/11.jpg" alt="">
        <p>描述：</p>
      </div>
    </div>
  </div>
</body>
<script>

  // 计算一行最多放几个元素
  // 区分第一行和其他行
  // 获取第一行所有元素的高度，作为初始列高
  // 其他行每个元素，定位
  // 获取最小列高，将最小列高作为当前元素的top
  // 最小列高的索引 * 列宽，作为left
  // 改变初始列高，当前列高 += 新放置元素的高度
  // 交给循环



  onload = function(){
    // 因为页面中有图片资源，为了保证能完全获取到图片撑开的尺寸，所以要等加载完成后再执行
    new WaterFall;
  }

  class WaterFall{
    constructor(){
      // 所有box元素
      this.box = document.querySelectorAll(".box");
      // 单行最大元素数
      this.maxNum = parseInt(document.documentElement.clientWidth / this.box[0].offsetWidth);

      console.log(this.maxNum)
      // 初始列高容器
      this.heightArr = [];

      // 执行第一行的功能
      this.firstLine()
      // 执行其他行的功能
      this.otherLine()
    }
    firstLine(){
      // 获取所有高度，存入列高容器
      for(let i=0;i<this.maxNum;i++){
        this.heightArr.push(this.box[i].offsetHeight);
      }
    }
    otherLine(){
      // 设置定位，获取最小列高，和索引，计算left和top，改变列高
      for(let i=this.maxNum; i<this.box.length;i++){
        this.box[i].style.position = "absolute";
        // ES6的技术
        // const min = Math.min(...this.heightArr);
        // ES5的技术
        // const min = Math.min.apply(Math, this.heightArr);
        // ES3的技术
        const min = this.heightArr.slice(0).sort((a,b)=>a-b)[0];
        this.box[i].style.top = min + "px";

        const minIndex = this.heightArr.indexOf(min);
        this.box[i].style.left = minIndex * this.box[i].offsetWidth + "px";
        
        // 改变初始列高，当前列高 += 新放置元素的高度
        this.heightArr[minIndex] += this.box[i].offsetHeight;
      }
    }
  }
</script>
</html>